<template>
	<view>
		<view class="con">
			<!-- <view class="header_center">
				<u-search placeholder="搜索你需要购买的商品" :disabled="true" @click='clickto("/pages/searchpage/searchpage")'
					height='73rpx' margin='0 19rpx 0 9rpx' :showAction='false' v-model="keyword"></u-search>
			</view> -->
			<view class="" style="padding: 0 27rpx;background-color: #fff;">
				
				<u-tabs @click="tabsChange" itemStyle='height:80rpx;' :list="list1" lineHeight='12rpx' lineWidth='32rpx'
					lineColor='#FF7428' activeStyle="color:#232323;font-size:41.67rpx;font-weight: bold;"
					inactiveStyle="color:#707070;fontSize:31.95rpx"></u-tabs>
			</view>
			
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="content">
					<proitem v-for="(item,index) in prolist" :key="index" :pro="item"></proitem>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getProductByCateGory
	} from '@/api/product.js'
	import {
		homeData
	} from '@/api/home.js'
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	export default {
		data() {
			return {
				paddingright: '',
				right: '',
				curi: 0,
				keyword: '',
				paddingTop: 0,
				list1: [],
				prolist: [],
				type:'tz',
				cuitype:2,
				category_id:1
			};
		},
		onLoad(o) {
			uni.setNavigationBarTitle({
				title:decodeURI(o.title)
			})
			// #ifdef MP
			this.paddingright = `calc((750rpx - (750rpx - ${menuButtonInfo.left}px) * 2) / 2 + 36rpx)`
			this.right = '72rpx'
			// #endif
			this.paddingTop = 44 + uni.getStorageSync('statusBarHeight')
			this.type=o.type
			this.getProductCategory()
		},
		methods: {
			async getProductCategory() {
				const res = await getProductByCateGory({
					type:this.type
				})
				this.prolist = res.data.data
				this.prolist.map(t => {
					t.img = this.$BASE_URL + t.images.split(',')[0]
				})
			},
			tabsChange(item) {
				if (this.listKey == item.id) return false;
				// this.prolist=[]
				this.category_id=item.id
				this.getProductCategory()
				this.listKey = item.id;
			},
			clickto(url){
				uni.$u.route(url)
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F7F7F9;
	}
	.u-nav-slot {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		line-height: 66rpx;
		border: 2rpx solid #FF7428;
		border-radius: 35rpx;
		color: #333333;
		overflow: hidden;

		.tab_item {
			text-align: center;
			width: 240rpx;
		}

		.active {
			background-color: #FF7428;
			// height: 72rpx;
			color: #fff;
		}
	}

	.header_center {
		padding: 0 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
	}
	.scroll-view {
		height: calc(100vh - 44px - var(--status-bar-height) - 77rpx);
		/* #ifdef MMP */
		height: calc(100vh - var(--status-bar-height) - 77rpx);
		/* #endif */
	}
	.content{
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
</style>
